<template>
  <Dropdown placement="bottom" :trigger="['click']" :dropMenuList="localeList" @menu-event="handleMenuEvent"
    @click="changeDropdown" overlayClassName="app-locale-picker-overlay">
    <span class="cursor-pointer flex items-center">
      <Icon :color="'#00E701'" icon="ant-design:global-outlined" size="18" />
      <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
    </span>
  </Dropdown>
</template>
<script lang="ts" setup>
import type { LocaleType } from '/#/config';
import type { DropMenu } from '/@/components/Dropdown';
import { ref, watchEffect, unref, computed } from 'vue';
import { Dropdown } from '/@/components/Dropdown';
import Icon from '@/components/Icon/Icon.vue';
import { useLocale } from '/@/locales/useLocale';
import { useLocalList } from '/@/settings/localeSetting';

// const localeList = useLocalList();

const localeList = [
  {
    key: 'lan_zh_CN',
    label: '中文', //中文
    title: 'zh_CN',
    img: 'CN',
    event: 'zh_CN',
    text: '中文',
  },
  {
    key: 'lan_en_US',
    label: '英文',
    title: 'en_US',
    img: 'US',
    event: 'en_US',
    text: 'English',
  },
  {
    key: 'lan_vi_VN',
    label: '越南语',
    title: 'vi_VN',
    img: 'VN',
    event: 'vi_VN',
    text: 'Tiếng Việt',
  },
  // {
  //   key: 'lan_th_TH',
  //   label: 'ไทย',
  //   title: 'th_TH',
  // },
  {
    key: 'lan_pt_BR',
    label: '葡萄牙语',
    title: 'pt_BR',
    img: 'BR',
    event: 'pt_BR',
    text: 'Português',
  },
];
const props = defineProps({
  /**
   * Whether to display text
   */
  showText: { type: Boolean, default: true },
  /**
   * Whether to refresh the interface when changing
   */
  reload: { type: Boolean },
});
const selectedKeys = ref<string[]>([]);

const { changeLocale, getLocale } = useLocale();
const showColorIcon = ref(true);
const getLocaleText = computed(() => {
  const key = selectedKeys.value[0];
  if (!key) {
    return '';
  }
  return localeList.find((item) => item.event === key)?.text;
});

watchEffect(() => {
  selectedKeys.value = [unref(getLocale)];
  console.log(selectedKeys.value);
});

async function toggleLocale(lang: LocaleType | string) {
  await changeLocale(lang as LocaleType);
  selectedKeys.value = [lang as string];
  props.reload && location.reload();
}
function changeDropdown() {
  showColorIcon.value = !showColorIcon.value;
}
function handleMenuEvent(menu: DropMenu) {
  showColorIcon.value = false;
  if (unref(getLocale) === menu.event) {
    return;
  }
  toggleLocale(menu.event as string);
}
</script>

<style lang="less">
.app-locale-picker-overlay {
  .ant-dropdown-menu-item {
    min-width: 160px;
  }
}
</style>
